<template>
  <div class="tasklist-con">
    <div class="row" style="padding-top: 0.32rem">
      <ListQuery @query="queryTaskList" />
    </div>
    <div class="row">
      <div class="left-con">
        <div class="new-btn" @click="DialogNewTask = true">
          <i class="el-icon-plus"></i>&nbsp;新增任务
        </div>
        <div class="new-btn" @click="DialogNewTaskBatch = true">
          <i class="el-icon-plus"></i>&nbsp;批量新增任务
        </div>
      </div>
      <div class="status-con">
        <div class="item" @click="pauseTask()">
          <div class="icon"></div>
          <div class="text">暂停</div>
        </div>
        <div class="item" @click="resumeTask()">
          <div class="icon"></div>
          <div class="text">恢复</div>
        </div>
        <div class="item" @click="editFrequency()">
          <div class="icon"></div>
          <div class="text">编辑频率</div>
        </div>
        <div class="item" @click="runOne()">
          <div class="icon"></div>
          <div class="text">单次执行</div>
        </div>
        <div class="item" @click="deleteTask()">
          <div class="icon"></div>
          <div class="text">删除</div>
        </div>
      </div>
    </div>
    <div class="table-con">
      <el-table
        ref="table"
        :data="tableData"
        border
        style="width: 100%"
        header-cell-class-name="custom-header"
        highlight-selection-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="jobName" label="任务名称" width="150">
        </el-table-column>
        <el-table-column prop="jobGroup" label="组名" width="150">
        </el-table-column>
        <el-table-column prop="chineseName" label="实体类型"> </el-table-column>
        <el-table-column prop="interval" label="频率"> </el-table-column>
        <el-table-column prop="description" label="任务描述"> </el-table-column>
        <el-table-column prop="startTimeFormat" label="创建时间">
        </el-table-column>
        <el-table-column prop="triggerStateName" label="任务状态">
        </el-table-column>
        <el-table-column label="操作" width="500">
          <template slot-scope="scope">
            <div class="action-con">
              <!-- <div class="action-btn" @click="editFrequency(scope.row)">
                编辑频率
              </div>
              <el-divider direction="vertical"></el-divider> -->
              <el-popover
                placement="top"
                width="300"
                trigger="click"
                :close-delay="3000"
              >
                <div class="progress-con">
                  <el-progress
                    :text-inside="true"
                    text-color="white"
                    define-back-color="grey"
                    :stroke-width="25"
                    :percentage="curProgressPercent"
                  ></el-progress>
                </div>
                <div
                  class="action-btn"
                  slot="reference"
                  @click="viewProgress(scope.row)"
                >
                  查看进度
                </div>
              </el-popover>

              <el-divider direction="vertical"></el-divider>
              <div class="action-btn" @click="showHistory(scope.row)">
                查看记录
              </div>
              <!-- <el-divider direction="vertical"></el-divider>
              <div class="action-btn" @click="runOne(scope.row)">单次执行</div> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pg-con">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tasklistquery.pageNumber"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="tasklistquery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- dialog -->
    <!-- 编辑频率 -->
    <el-dialog
      title="编辑频率"
      class="tb-dialog"
      :visible.sync="DialogEditFrequency"
      width="30%"
      :before-close="handleClose"
      :modal="false"
    >
      <div class="dialog-con">
        <EditFrequencyForm ref="editFreComp" :taskData="chosedTbRow" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogEditFrequency = false" type="info"
          >重置</el-button
        >
        <el-button type="primary" @click="saveFrequency()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 新增任务 -->
    <el-dialog
      title="新增任务"
      class="tb-dialog"
      :visible.sync="DialogNewTask"
      width="50%"
      :before-close="handleClose"
      :modal="false"
    >
      <div class="dialog-con"><NewTaskForm ref="newTaskComp" /></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogNewTask = false" type="info">重置</el-button>
        <el-button type="primary" @click="newTask()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 批量新增任务 -->
    <el-dialog
      title="批量新增任务"
      class="tb-dialog"
      :visible.sync="DialogNewTaskBatch"
      width="50%"
      :before-close="handleClose"
      :modal="false"
    >
      <div class="dialog-con"><NewTaskBatchForm ref="newTaskBatchComp" /></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogNewTaskBatch = false" type="info"
          >重置</el-button
        >
        <el-button type="primary" @click="newTaskBatch()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 历史记录 -->
    <el-dialog
      title="历史记录"
      class="tb-dialog"
      :visible.sync="DialogHistoryTb"
      width="70%"
      :before-close="handleClose"
      :modal="false"
    >
      <div class="dialog-con">
        <historyTable :show="DialogHistoryTb" :chosedTask="chosedTbRow" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogHistoryTb = false" type="info">重置</el-button>
        <el-button type="primary" @click="DialogHistoryTb = false"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import moment from "moment";
import ListQuery from "./comp/form/ListQuery.vue";
import EditFrequencyForm from "./comp/form/EditFrequencyForm.vue";
import NewTaskForm from "./comp/form/NewTaskForm.vue";
import NewTaskBatchForm from "./comp/form/NewTaskBatchForm.vue";
import historyTable from "./comp/table/historyTable.vue";
import {
  addjob,
  batchAddjob,
  getJobs,
  carryOutOne,
  getSchedule,
  pausejob,
  deletejob,
  resumejob,
  reschedulejob,
} from "@/api/tasklist.js";
export default {
  components: {
    ListQuery,
    EditFrequencyForm,
    NewTaskForm,
    NewTaskBatchForm,
    historyTable,
  },
  computed: {},
  data: () => {
    return {
      curProgressPercent: 0, // 进度百分比
      DialogEditFrequency: false,
      DialogNewTask: false,
      DialogNewTaskBatch: false,
      DialogHistoryTb: false,
      tableData: [
        {
          no: 1,
        },
        {
          no: 2,
        },
        {
          no: 3,
        },
      ],
      total: 0,
      tasklistquery: {
        jobName: "",
        jobGroup: "",
        entityType: "",
        triggerState: "",
        description: "",
        pageNumber: 1,
        pageSize: 10,
      },

      chosedTbRow: {}, // 当前选中的表格某行-单选
      chosedTbMultiRow: [], // 表格选中多行-多选-批量暂停、恢复、删除时用
    };
  },
  mounted() {
    this.getTaskList();
  },
  methods: {
    // 编辑频率
    editFrequency() {
      this.DialogEditFrequency = true;
    },
    // 保存频率
    saveFrequency() {
      this.DialogEditFrequency = false;
      const data = this.$refs.editFreComp.formData;
      this.chosedTbRow.timeCount = data.timeCount;
      this.chosedTbRow.timeType = data.timeType;
      this.reStartTask(this.chosedTbRow);
    },
    // 暂停任务
    pauseTask() {
      if (this.hasChosedTask()) {
        let json = this.getNameAndGroup(this.chosedTbMultiRow);
        pausejob(json)
          .then((res) => {
            if (res.indexOf("成功") != -1) {
              this.$message({
                message: res,
                type: "success",
              });
              this.getTaskList();
            } else {
              this.$message({
                message: res,
                type: "success",
              });
            }
          })
          .catch((err) => {});
      }
    },
    // 恢复任务
    resumeTask() {
      if (this.hasChosedTask()) {
        let json = this.getNameAndGroup(this.chosedTbMultiRow);
        resumejob(json)
          .then((res) => {
            if (res.indexOf("成功") != -1) {
              this.$message({
                message: res,
                type: "success",
              });
              this.getTaskList();
            } else {
              this.$message({
                message: res,
                type: "success",
              });
            }
          })
          .catch((err) => {});
      }
    },
    // 删除任务
    deleteTask() {
      if (this.hasChosedTask()) {
        let json = this.getNameAndGroup(this.chosedTbMultiRow);
        deletejob(json)
          .then((res) => {
            if (res.indexOf("成功") != -1) {
              this.$message({
                message: res,
                type: "success",
              });
              this.getTaskList();
            } else {
              this.$message({
                message: res,
                type: "success",
              });
            }
          })
          .catch((err) => {});
      }
    },

    hasChosedTask() {
      // if (this.chosedTbRow != {} && this.chosedTbRow.jobName) {
      //   return true;
      // } else {
      //   this.$message({
      //     message: "请先勾选一个任务",
      //   });
      //   return false;
      // }
      if (this.chosedTbMultiRow.length > 0) {
        return true;
      } else {
        this.$message({
          message: "请先勾选任务",
        });
      }
    },
    getNameAndGroup(list) {
      let newlist = [];
      list.map((item) => {
        newlist.push({
          jobGroup: item.jobGroup,
          jobName: item.jobName,
        });
      });
      return newlist;
    },
    // 勾选
    handleSelectionChange(selected) {
      // 只支持单选
      // // 一次只能勾选一条记录
      // if (selected.length > 1) {
      //   // 已经勾选了一行的情况下又勾选了一行
      //   // 取消所有其他行的选择
      //   this.$refs.table.clearSelection();
      //   // 只保留当前选中的行
      //   this.$refs.table.toggleRowSelection(selected[1], true);
      //   this.chosedTbRow = selected[1];
      // } else if (selected.length == 1) {
      //   // 勾选了一行
      //   this.chosedTbRow = selected[0];
      // } else {
      //   // 一行都没勾选
      //   this.chosedTbRow = {};
      // }
      // 支持多选
      this.chosedTbMultiRow = selected;
    },
    // 重启任务
    reStartTask(item) {
      if (this.hasChosedTask()) {
        let json = this.getNameAndGroup(this.chosedTbMultiRow);
        reschedulejob({
          jobNameGroups: json,
          // jobName: item.jobName,
          timeCount: item.timeCount,
          timeType: item.timeType,
        })
          .then((res) => {
            if (res.indexOf("成功") != -1) {
              this.$message({
                message: res,
                type: "success",
              });
              this.getTaskList();
            } else {
              this.$message({
                message: res,
                type: "success",
              });
            }
          })
          .catch((err) => {});
      }
    },
    // 单次执行
    runOne() {
      if (this.hasChosedTask()) {
        let json = this.getNameAndGroup(this.chosedTbMultiRow);
        carryOutOne(json)
          .then((res) => {
            if (res.code == 200)
              this.$message({
                message: res.msg,
                type: "success",
              });
          })
          .catch((err) => {});
      }
    },
    // 查看记录
    showHistory(item) {
      this.DialogHistoryTb = true;
      this.chosedTbRow = item;
    },
    // 查看进度
    viewProgress(item) {
      getSchedule({
        jobName: item.jobName,
      })
        .then((res) => {
          // debugger;
          this.curProgressPercent = res;
          // this.$message({
          //   message: res,
          //   type: "success",
          // });
        })
        .catch((err) => {});
    },
    // 选中表格某一行
    // clickTbRow(item) {
    //   debugger;
    //   this.chosedTbRow = item;
    // },
    // 批量新增任务
    newTaskBatch() {
      const data = this.$refs.newTaskBatchComp.formData;
      const enList = this.$refs.newTaskBatchComp.entityLists;
      let batchJobFields = [];
      enList.map((item) => {
        batchJobFields.push({
          entityType: item.entityType,
          fields: item.fields,
        });
      });
      data["batchJobFields"] = batchJobFields;

      batchAddjob(data)
        .then((res) => {
          if (res.indexOf("成功") != -1) {
            this.$message({
              message: res,
              type: "success",
            });
            this.DialogNewTaskBatch = false;
            this.getTaskList();
          } else {
            this.$message({
              message: res,
            });
          }
        })
        .catch((err) => {});
    },
    // 新增任务
    newTask() {
      const data = this.$refs.newTaskComp.formData;
      if (data.isSelect == true) {
        if (data.fields.length == 0) {
          this.$message({
            message: "必须选择至少一个字段",
          });
          return;
        }
      } else {
        delete data.fields;
      }

      addjob(data)
        .then((res) => {
          if (res.indexOf("成功") != -1) {
            this.$message({
              message: res,
              type: "success",
            });
            this.DialogNewTask = false;
            this.getTaskList();
          } else {
            this.$message({
              message: res,
            });
          }
        })
        .catch((err) => {});
    },
    formatDate(date) {
      return moment(date).format("YYYY-MM-DD HH:mm");
    },

    // 子组件调用父组件的任务列表查询
    queryTaskList(searchData) {
      this.tasklistquery.jobName = searchData.jobName;
      this.tasklistquery.jobGroup = searchData.jobGroup;
      this.tasklistquery.entityType = searchData.entityType;
      this.tasklistquery.triggerState = searchData.triggerState;
      this.getTaskList();
    },
    getTaskList() {
      getJobs(this.tasklistquery)
        .then((res) => {
          this.tableData = res.records;
          this.total = res.total;
          // 取消勾选
          this.chosedTbRow = {};
        })
        .catch((err) => {});
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      this.tasklistquery.pageSize = val;
      this.getTaskList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.tasklistquery.pageNumber = val;
      this.getTaskList();
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      done();
    },
  },
};
</script>
  
<style>
.custom-header {
  background: #f2f5f7 !important;
  font-family: SourceHanSansCN;
  font-weight: 500;
  font-size: 0.18rem;
  color: #333333;
}
</style>
<style lang="less" scoped>
.progress-con {
  width: 90%;
  margin: 0 auto;
}
.tasklist-con {
  padding-left: 0.41rem;
  padding-right: 0.39rem;
  .row {
    // height: 0.48rem;
    display: flex;
    align-items: center;
  }
  .new-btn {
    width: fit-content;
    height: 0.48rem;
    line-height: 0.48rem;
    background: #27c4a5;
    border-radius: 0.04rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    font-size: 0.18rem;
    color: #ffffff;
    margin-left: 0.1rem;
    cursor: pointer;
    text-align: center;
    padding: 0 0.1rem;
  }
  .left-con {
    width: 100%;
    display: flex;
    margin-top: 0.2rem;
    margin-bottom: 0.14rem;
    justify-content: left;
  }
  .status-con {
    width: 100%;
    display: flex;
    margin-top: 0.2rem;
    margin-bottom: 0.14rem;
    justify-content: right;
    .item {
      display: flex;
      align-items: center;
      margin-right: 0.4rem;
      cursor: pointer;
      .icon {
        margin-right: 0.1rem;
      }

      .text {
        font-family: SourceHanSansCN;
        font-weight: 400;
        font-size: 0.16rem;
        color: #999999;
      }
    }
    .item:nth-child(1) {
      .icon {
        width: 0.16rem;
        height: 0.16rem;
        background: url("~@/assets/images/任务列表/pause.png") no-repeat center;
        background-size: contain;
      }
    }
    .item:nth-child(2) {
      .icon {
        width: 0.16rem;
        height: 0.16rem;
        background: url("~@/assets/images/任务列表/启动.png") no-repeat center;
        background-size: contain;
      }
    }
    .item:nth-child(3) {
      .icon {
        width: 0.16rem;
        height: 0.16rem;
        background: url("~@/assets/images/任务列表/恢复.png") no-repeat center;
        background-size: contain;
      }
    }
    .item:nth-child(4) {
      .icon {
        width: 0.16rem;
        height: 0.16rem;
        background: url("~@/assets/images/任务列表/启动.png") no-repeat center;
        background-size: contain;
      }
    }
    .item:nth-child(5) {
      .icon {
        width: 0.16rem;
        height: 0.16rem;
        background: url("~@/assets/images/任务列表/删除.png") no-repeat center;
        background-size: contain;
      }
      .text {
        color: #ff4433;
      }
    }
  }
  .table-con {
    height: 5.5rem;
    overflow-y: auto;
    .action-con {
      display: flex;
    }
    .action-btn {
      font-family: SourceHanSansCN;
      font-weight: 500;
      font-size: 0.16rem;
      color: #396bfe;
      cursor: pointer;
    }
  }
  .pg-con {
    text-align: right;
    padding-top: 0.2rem;
    :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
      background-color: #3364fe;
    }
  }
  .tb-dialog {
    :deep(.el-dialog__header) {
      padding: 0rem !important;
      height: 0.48rem !important;
      line-height: 0.48rem !important;
      display: flex !important;
      background: #487efe;
      font-family: SourceHanSansCN;
      font-weight: bold;
      font-size: 0.16rem;
      padding-left: 0.16rem !important;

      .el-dialog__headerbtn {
        top: 0;
      }
      .el-dialog__title,
      .el-dialog__headerbtn .el-dialog__close {
        color: #ffffff !important;
        line-height: 0.48rem !important;
      }
    }
    .dialog-con {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      max-height: 6.5rem;
      overflow-y: auto;
      padding: 0.5rem 0;
    }
  }
}
</style>
  